<template>
	<view class="monitor-data-page">
		<!-- 监测点基本信息展示 -->
		<view class="monitor-info">
			<view class="info-name">
				<text style="font-size: 40rpx;">{{markers.siteName}}</text>
			</view>
			<view class="info-count">
				<label>当前监测值</label>
				<text style="font-size: 60rpx;color: #10a1d6;padding-top: 10rpx;">{{markers.count}}dB</text>
			</view>
			<view class="info-address">
				<label>监测点位置：</label>
				<text>{{markers.address}}</text>
			</view>
		</view>

		<!-- uCharts时间折线图 -->
		<uni-section title="凌晨到当前时刻超过60dB趋势图" type="line">
			<button size="mini" @click="setLandscape">横屏观看</button>
		</uni-section>
		<view class="charts-box">
			<qiun-data-charts type="tline" :chartData="chartsDataTLine" canvasId="monitorByTimeCanvasId"
				:canvas2d="true" :inScrollView="true" background="none" :ontouch="true" :opts="opts" />
		</view>

		<!-- 起止日期选择器 -->
		<uni-section title="24小时实时监测数据查看" subTitle="仅支持查询连续两天内的数据" type="line"></uni-section>
		<view class="uni-datetime-picker">
			<uni-datetime-picker v-model="startDatetime" placeholder="请选择起始日期时间" start="2010-6-10 08:30:30"
				end="2021-7-16 18:00:00" @change="pickerChange($event,'startDatetime')"></uni-datetime-picker>
		</view>
		<template v-if="startDatetime != '' & startDatetime != null">
			<view class="uni-datetime-picker">
				<uni-datetime-picker v-model="endDatetime" placeholder="请选择截止日期时间" start="2010-6-10 08:30:30"
					end="2022-6-10 08:30:30" @change="pickerChange($event,'endDatetime')"></uni-datetime-picker>
			</view>
		</template>

		<!-- <uni-datetime-picker v-model="datetimerange" type="datetimerange" start="2021-3-20 12:00:00"
			end="2021-7-20 20:00:00" rangeSeparator="至" /> -->

		<!-- 数据表格table -->
		<uni-table stripe emptyText="暂无更多数据" border :loading="tableLoading">
			<uni-tr>
				<uni-th>时刻</uni-th>
				<uni-th>噪音/dB</uni-th>
			</uni-tr>
			<uni-tr v-for="item in hourListData">
				<uni-td>{{item.createtime}}</uni-td>
				<uni-td>{{item.volume}}</uni-td>
			</uni-tr>
		</uni-table>

		<!-- 回到页面顶部 -->
		<view class="top-button" v-show="topState">
			<image class="top-image" src="../../static/img/icons/returnTop.svg" @click="returnTop" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: {}, //当前监测点相关信息
				hourListData: {}, //24小时监测数据
				// listDevice: [],	//当前监测点设备信息
				kid: '', //当前监测点唯一标识码
				startDatetime: "", //开始日期及时间
				endDatetime: "", //截止日期及时间
				minDate: "", //可选择最早日期及时间
				maxDate: "", //可选择最晚日期及时间
				// datetimerange: [],	//起止时间范围
				chartsDataTLine: { //uCharts图表数据
					"categories": [],
					"series": []
				},
				opts: { //当前图表配置项
					"xAxis": { //x轴相关配置
						"itemCount": 6, //刻度点数量
						"scrollAlign": "right" //滚动条初始方向
					}
				},
				topState: false, //判断是否显示回到顶部按钮
				tableLoading: true, //表格加载状态
			}
		},
		onLoad(data) { //页面加载时获取上一页面传入的监测点信息
			let _this = this;
			_this.markers = data; //将监测点信息存入标记点
			_this.kid = data.kid; //当前监测点 kid 单独存放
			// _this.getAjax(_this.baseApi + '/monitorValue/getSiteDevice', {	//获取当前监测点设备信息
			// 	kid: data.kid
			// }, function(res) {
			// 	if (res.data.code === 200) {	//请求成功后，存入相关数据
			// 		_this.listDevice = res.data.data;
			// 	}
			// });
		},
		async onReady() { //页面渲染完成后获取所需数据
			//从服务器获取数据
			this.getListData({
				kid: this.kid
			});
			await this.getHourListData({
				kid: this.kid
			});
			this.tableLoading = false;
		},
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 800) { //当距离大于800时显示回到顶部按钮
				this.topState = true
			} else { //当距离小于800时隐藏回到顶部按钮
				this.topState = false
			}
		},
		methods: {
			// 根据当前监测点kid从后台获取 凌晨到当前时刻超过60 数据用于折线图展示
			getListData: function(params) { //接收当前监测点kid值
				let _this = this;
				setTimeout(function() {
					_this.getAjax(_this.baseApi + '/monitorValue/getTotal60', params, function(res) {
						if (res.data.code == 200) { //请求成功后，存入折线图相关数据
							let datas = res.data.data;
							let _categories = [];
							let _seriesData = [];
							datas.forEach(item => {
								_categories.push(item.createtime);
								_seriesData.push(Number.parseFloat(item.volume));
							});
							let obj = [{
								"name": "噪音值",
								"data": _seriesData
							}];
							_this.chartsDataTLine['categories'] = _categories.slice(0, 80);
							_this.chartsDataTLine['series'] = [{
								"name": "噪音值",
								"data": _seriesData.slice(0, 80)
							}]
						}
					});
				}, 3000);

			},
			// 根据当前监测点kid从后台获取 最近24小时 数据用于table展示
			getHourListData(params) { //接收当前监测点kid值
				let _this = this;
				return new Promise((resolve) => {
					_this.getAjax(this.baseApi + '/monitorValue/get0toNow', params, function(res) {
						if (res.data.code == 200) { //请求成功后，存入相关数据
							let datas = res.data.data;
							_this.hourListData = datas;
							resolve();
						}
					});
				})
			},
			// 设置横屏观看模式（新页面观看）
			setLandscape() {
				uni.navigateTo({
					url: './trendChart?chartsDataTLine=' + JSON.stringify(this.chartsDataTLine),
					success: function(res) {

					}
				})
			},
			// 选择起止日期时间 picker 改变事件
			pickerChange(e, date) {
				if (date == 'startDatetime') { //改变开始日期时间
					this.startDatetime = e.slice(0, 16);
				} else if (date == 'endDatetime') { //改变截止日期时间
					this.endDatetime = e.slice(0, 16);
					this.getHourListData({ //传入起止日期时间后从后端获取对应数据
						kid: this.kid,
						date_start: this.startDatetime,
						date_end: this.endDatetime
					});
				}
			},
			returnTop() { //回到页面顶部  
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}

		}
	}
</script>

<style>
	/* 监测点基本信息展示 */
	.monitor-info {
		display: flex;
		flex-wrap: wrap;
		background-color: #FFFFFF;
	}

	.info-name {
		width: 40%;
		border-right: 1px #e3e3e3 solid;
	}

	.info-count {
		flex: 1;
	}

	.info-name,
	.info-count {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-bottom: 1px #e3e3e3 solid;
		height: 180rpx;
		color: #767676;
	}

	.info-address {
		width: 100%;
		line-height: 80rpx;
		border-bottom: 1px #e3e3e3 solid;
		padding-left: 30rpx;
		color: #767676;
	}

	.info-address label {
		padding-right: 30rpx;
	}

	/* uCharts图表 */
	.charts-box {
		width: 100%;
		height: 300px;
		background-color: #FFFFFF;
	}

	/* 日期时间选择器 */
	.uni-datetime-picker {
		margin-bottom: 10rpx;
	}

	/* 回到顶部 */
	.top-button {
		position: relative;
	}

	.top-image {
		position: fixed;
		right: 40rpx;
		bottom: 16%;
		height: 56px;
		width: 56px;
	}

	/* .landscape-title {
		transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
	} */
</style>
